<template>
  <header class="header-warp">
    <div class="logo">
      <img src="../assets/img/home_logo.png" alt>
    </div>
    <div class="user-logout" @click="logout()">
      <span class="iconfont icon-logout"></span>
      退出
    </div>
    <div class="user-info">
      <img class="user-head" src="../assets/img/user_head.png" alt>
      <span class="user-name" v-if="account">{{account}}</span>
    </div>
  </header>
</template>

<script>
export default {
  props: ["login_user"],
  data() {
    return {
      account: '',
      dialogChangePassword: false,
      formChangePassword: {
        newPassword: ""
      },
      rulesChangePassword: {
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    modifyPassword() {
      let that = this;
      that.$refs["formChangePassword"].validate(valid => {
        if (valid) {
          that.ajax({
            api: "/admin/user/modifyPassword",
            data: that.formChangePassword,
            success: function(data) {
              if (data.code == "0") {
                that.showMsg("修改成功，请重新登录", "success");
                that.dialogChangePassword = false;
                that.logout();
              }
            }
          });
        }
      });
    },
    open(method) {
      let that = this;
      that[method] = true;
    }
  },
  watch: {
    dialogChangePassword(curr, old) {
      let that = this;
      if (curr == false) {
        that.$refs["formChangePassword"].resetFields();
      }
    }
  },
  created() {
    let that = this;
    that.account = that.login_user.account;
  }
};
</script>

<style lang="less">
.header-warp {
  height: 100%;
  font-size: 22px;
  padding: 0 20px;
  background: #fff;
  .logo {
    float: left;
    height: 30px;
    margin-top: 25px;
    img {
      display: block;
      height: 30px;
    }
  }
  .user-info {
    float: right;
    font-size: 0px;
    margin-right: 40px;
    margin-top: 20px;
    .user-name {
      font-size: 18px;
      color: #000;
    }
    .user-head {
      position: relative;
      top: 8px;
      background-color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .user-logout {
    float: right;
    font-size: 18px;
    cursor: pointer;
    margin-top: 28px;
    .icon-logout {
      font-size: 24px;
      margin-right: 0px;
    }
  }
  .el-dropdown-menu__item {
    text-align: center;
  }
  .product {
    padding: 20px 0;
    margin-right: 30px;
    float: right;
    display: flex;
    span {
      width: 60px;
      font-size: 16px;
      line-height: 40px;
    }
    el-select {
      width: 120px;
    }
  }
}
</style>
